import { AppState, Selectors } from './../../store/index';
import { Store, select } from "@ngrx/store";
import { Component, OnInit } from "@angular/core";
import { State } from "src/app/store/reducers/theme.reducer";
import { setTheme, setThemeID } from "src/app/store/actions/theme.action";

interface Color {
  id: number;
  color: string;
  name: State["theme"];
}

@Component({
  selector: "app-draw-theme",
  templateUrl: "./draw-theme.component.html",
  styleUrls: ["./draw-theme.component.scss"]
})
export class DrawThemeComponent implements OnInit {
  checkedID: number = 0;

  colors: Color[] = [
    { id: 0, color: "#3f51b5", name: "primary" },
    { id: 1, color: "#f44336", name: "warn" },
    { id: 2, color: "grey", name: "basic" }
  ];

  constructor(private store$: Store<AppState>) {}

  ngOnInit(): void {
    this.store$.pipe(select(Selectors.theme)).subscribe(({id}) => {
      this.checkedID = id;
    })
  }

  chooseColor(item: Color) {
    if (this.checkedID !== item.id) {
      this.checkedID = item.id;
      this.store$.dispatch(
        setTheme({
          propTheme: item.name
        })
      );
      this.store$.dispatch(
        setThemeID({
          propThemeID: item.id
        })
      );
    }
  }
}
